<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录后台</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/navbar.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/footer.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/common.css}"/>
    <script th:src="@{/static/js/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/common.js}"></script>
    <link rel="icon" th:href="@{/static/jcuticon.ico}" />

</head>
<body>
<div th:insert="components/navbar::navbar"></div>

<div class="container content" style="min-height: 100vh;">
    <div class="card" style="width: 30%;margin: 0 auto;text-align: center;">
        <div class="card-body">
            <form th:action="@{/login}" method="post">
                <input type="hidden" name="id">
                <!--    不要给id手动设置value="null"，这会传一个字符串过去，而后端需要一个Integer，无法转成字符串，会报400-->
                <div class="mb-3">
                    <label for="account" class="form-label">账号：</label>
                    <input type="text" name="account" class="form-control" id="account" aria-describedby="emailHelp">
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码：</label>
                    <input type="password" name="password" class="form-control" id="password">
                </div>
                <div class="mb-3">
                    <label for="code" class="form-label">验证码：</label>
                    <div class="col">
                        <input type="text" name="code" class="form-control" id="code"
                               style="width: 80%; display: inline-block">
                        <img src="codeImage"
                             id="codeImage"
                             style="height:33px;cursor:pointer;"
                             onclick="flush()">
                    </div>
                    <span th:text="${session.captchaCodeErrorMsg}" style="color: #FF0000;"></span>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
                <div style="color: red; font-size: 14px;" th:text="${session.message}"></div>
            </form>
        </div>
    </div>
</div>

<div th:insert="components/footer::footer"></div>
</body>
</html>
<script>
    function flush() {
        $.ajax({
            url: "codeImage?" + new Date().getTime(),
            type: "get",
            xhrFields: {
                responseType: 'blob' // 设置响应类型为blob
            },
            success(resp) {
                const url = URL.createObjectURL(resp);
                $("#codeImage").attr("src", url);
            }
        })

    }
</script>